<template>
  <div class="box">
    <div id="mynetwork" class="myChart"></div>
  </div>
</template>

<script>
require("vis-network/dist/dist/vis-network.min.css");
const vis = require("vis-network/dist/vis-network.min");
import DIVECE from './image/device.png'
export default {
  data() {
    return {};
  },
  mounted() {
    this.makeVis();
  },
  methods: {
    makeVis() {
      var that = this;
      // let edges = [
      //   {
      //     from: 1,
      //     to: 2,
      //     id: 1,
      //     title: "线名称1-2"
      //   },
      //   {
      //     from: 2,
      //     to: 3,
      //     id: 2,
      //     title: "线名称2-3"
      //   },
      //   {
      //     from: 3,
      //     to: 1,
      //     id: 3,
      //     title: "线名称3-1"
      //   }
      // ];
      // let nodes = [
      //   {
      //     id: 1,
      //     label: "DIVECE-设备一",
      //     image: DIVECE
      //   },
      //   {
      //     id: 2,
      //     label: "DIVECE-设备二",
      //     image: DIVECE
      //   },
      //   {
      //     id: 3,
      //     label: "DIVECE-设备三",
      //     image: DIVECE
      //   }
      // ];
      const edges = []
      const nodes = []

      for (let i = 0; i <= 30; i++) {
        nodes.push(
          {
            id: i,
            label: "点" + i,
            image: DIVECE
          },
        )
        edges.push(
          {
            from: i,
            to: i + 1,
            id: i,
            title: "线名称" + i + "---" + i + 1
          },
        )
        edges.push(
          {
            from: i,
            to: i + 3,
            id: i + "3",
            title: "线名称" + i + "---" + i + 1
          },
        )
        edges.push(
          {
            from: i,
            to: i + Math.floor( Math.random() * 30 ),
            id: i + "2",
            title: "线名称" + i + "---" + i + 1
          },
        )
      }

      edges.push(
        {
          from: 20,
          to: 1,
          id: "ABCD唯一标识",
          title: "线名称-----回连"
        },
      )

      var data = {
        nodes: nodes,
        edges: edges
      };
      var container = document.getElementById("mynetwork");
      const options = {
        nodes: {
          font: {
            color: "#000",
            size: 20
          },
          scaling: {
            min: 0,
            max: 0,
            label: {
              enabled: true,
              min: 8,
              max: 8,
              maxVisible: 0
            }
          },
          borderWidth: 5,
          color: {
            border: "white"
          },
          shape: "image",
          brokenImage: DIVECE,
          shapeProperties: {
            interpolation: true
          },
          size: 30
        },
        groups: {
          ws: {
            shape: "dot",
            color: "white"
          }
        },
        physics: {
          barnesHut: {
            // 引力常数   节点之间的引力强度。负值表示排斥力，正值表示吸引力。更大的值会增加节点之间的相互吸引或排斥的强烈程度
            gravitationalConstant: -10000,
            // 弹簧常数   节点链接之间的弹性力强度。该值越大，节点之间的连接线就会变得更紧密和更有张力
            springConstant: 0.01,
            // 弹簧长度   节点链接的自然长度。当链接的实际长度小于这个值时，会产生收缩力；当实际长度大于这个值时，会产生拉伸力。这个值指定了通过控制节点之间连接线的张力来调整布局的紧密程度。
            springLength: 100,
            // 中心引力   整个图的中心位置对节点的吸引力或排斥力的影响程度。较大的值会将节点聚焦到图的中心，较小的值会让节点更倾向于分散到整个布局
            centralGravity: 0.1
          }
        },
        interaction: {
          hover: true,
          selectConnectedEdges: true,
          hoverConnectedEdges: false,
          tooltipDelay: 200,
          zoomView: true
        },
        edges: {
          color: {
            color: "green",
            highlight: "green",
            hover: "green",
            inherit: "from",
            opacity: 1
          },
          font: {
            color: "#000",
            size: 1
          },
          scaling: {
            min: 1,
            max: 1
          },
          arrowStrikethrough: true,
          selfReferenceSize: 3,
          hoverWidth: 0.1,
          shadow: false,
          smooth: {
            enabled: true,
            type: "dynamic",
            roundness: 0.5
          }
        }
      };
      that.network = new vis.Network(container, data, options);
    }
  }
};
//
</script>

<style>
.box {
  width: 100%;
  height: 100%;
}

.myChart {
  width: 100%;
  height: 100%;
}
</style>
